<template>
	<div id="cinema">
		<!-- 选择地区 -->
		<van-nav-bar title="影院" left-arrow @click-left="onClickLeft">
			<!-- 左边插槽 -->
			<template #left>
				{{city}}
				<van-icon name="arrow-down" color="rgb(25, 26, 27)" />
			</template>
			<!-- 右边插槽 -->
			<template #right>
				<van-icon name="search" size="21" color="#9a9a9a" />
			</template>
		</van-nav-bar>
		<!-- 菜单 -->
		<van-dropdown-menu>
			<van-dropdown-item title="全城" ref="item">
				<van-cell center title="包邮">
					
				</van-cell>
			</van-dropdown-item>
			<van-dropdown-item v-model="value" :options="option2" />
			<van-dropdown-item v-model="value" :options="option3" />
		</van-dropdown-menu>
		<!-- 影院列表 -->
		<van-list class="vanlist">
			<ul>
				<li v-for="(v,i) in cinemas" :key="i" @click="goCfilm(v.cinemaId)">
					<!-- 店名+地址 -->
					<div class="cinema-left cinema-li">
						<div class="cl-top">
							{{v.name}}
						</div>
						<div class="cl-botton">
							{{v.address}}
						</div>
					</div>
					<!-- 价格+距离 -->
					<div class="cinema-right  cinema-li">
						<div class="cr-top">
							<span>￥</span>{{v.lowPrice/100}}起
						</div>
						<div class="cr-botton">
							{{v.Distance.toFixed(2)}}公里
						</div>
					</div>
				</li>
			</ul>
		</van-list>
		<!-- 引入路由 -->
		<router-view />

	</div>
</template>

<script type="text/javascript">
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				value: 0,
				switch1: false,
				switch2: false,
				option2: [{
						text: 'APP订票',
						value: 0
					},
					{
						text: '前台兑换',
						value: 1
					}
				],
				option3: [{
						text: '最近去过',
						value: 0
					},
					{
						text: '离我最近',
						value: 1
					}
				],
				/* 影院数据 */
				cinemas: []
			};
		},
		methods: {
			onConfirm() {
				this.$refs.item.toggle();
			},
			/* 跳转影院详情 */
			goCfilm(id){
				this.$router.push({name:'cfilm',params:{
					id:id,
				}})
			},
			/* 跳转地址 */
			onClickLeft(){
				this.$router.push({name:"city"})
			}
		},
		mounted() {
			this.$axios.get('/cinemaList').then((res) => {
				this.cinemas = res.cinemas;
			})
		},
		computed:{
			//解构仓库Satet
			...mapState(['city'])
		}
	};
</script>

<style lang="scss" scoped="scoped">
	#cinema {

		/* 影院列表 */
		.vanlist {
			ul {
				li {
					padding: 15px;
					display: flex;
					justify-content: space-between;

					/* 店名+地址 */
					.cinema-left {
						text-align: left;

						.cl-top {
							color: rgb(25, 26, 27);
							font-size: 15px;
						}

						.cl-botton {
							color: rgb(121, 125, 130);
							font-size: 12px;
							margin-top: 5px;
						}
					}

					/* 价格+距离 */
					.cinema-right {
						width: 70px;

						.cr-top {
							color: rgb(255, 95, 22);
							font-size: 15px;
						}

						.cr-botton {
							color: rgb(121, 125, 130);
							font-size: 12px;
							margin-top: 5px;
						}
					}
				}
			}
		}
	}
</style>
